<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
  color: #347DE1
}

.hex-form-inf-content-show {
  font-size: 14px;
  font-weight: 500;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: #F7F9FA;
  border: 1px solid #347DE1;
  border-radius: 8px;
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" :body-style="{ padding: '20px 40px' }">
        <div slot="header" class="clearfix">
          <div class="el-page-header">
            <div class="el-page-header__content" style="font-size: 15px;">应用配置</div>
          </div>
        </div>
        <div class="dataFrom">
          <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="300px">
            <el-row>
              <el-col :span="15">
                <el-form-item label="应用编号" prop="appCode">
                  <el-input :disabled="true" v-model="form.appCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    唯一编码，大写英文字母加数字组成
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="应用名称" prop="appName">
                  <el-input :disabled="true" v-model="form.appName"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    唯一名称，节点名称不多于12位
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="应用组" prop="groupCode">
                  <el-select disabled v-model="form.groupName" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in groupList" :key="item.groupCode" :label="item.groupName"
                               :value="item.groupCode"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    应用分配到对应的应用组
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="并发数" prop="concurrentNum">
                  <el-input-number v-bind:disabled="form.isAssignRes!='true'" v-model="form.concurrentNum" :min="1"
                                   :max="1000"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    应用上同时执行任务数阈值
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="资源数" prop="resNum">
                  <el-input-number v-bind:disabled="form.isAssignRes!='true'" v-model="form.resNum" :min="1"
                                   :max="10000"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    应用上同时执行任务的资源数总和阈值
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="分发策略">
                  <el-radio-group v-model="form.dispatcherStrategyCode">
                    <el-radio disabled class="form-el-radion" label='1'>按优先级顺序</el-radio>
                    <el-radio disabled class="form-el-radion" label='2'>按优先级且资源数顺序,资源数由大到小</el-radio>
                    <el-radio disabled class="form-el-radion" label="3">按优先级且资源数顺序,资源数由小到大</el-radio>
                    <el-radio disabled class="form-el-radion" label="6">按时间最早先执行</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    等待分发的任务排序策略
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="任务预计执行时长（秒）" prop="planExecDuration">
                  <el-input-number v-model="form.planExecDuration" :min="0"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    预估任务的执行时间
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="任务超时时长（秒）" prop="overPlanDuration">
                  <el-input-number v-model="form.overPlanDuration" :min="0"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    允许任务超时最大时长
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="任务出错间隔时间（秒）" prop="errDifferDuration">
                  <el-input-number v-model="form.errDifferDuration" :min="0"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    任务发送失败，重新发送时间间隔
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="是否可分配资源" prop="isAssignRes">
                  <el-checkbox disabled v-model="form.isAssignRes" true-label="true"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    应用管理员是否有权限修改并发数和资源数阈值
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="应用描述" prop="appDesc">
                  <el-input v-model="form.appDesc" :disabled="true" type="textarea" style="width: 100%;"
                            :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    应用的描述信息
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="每个节点的权重（%）" prop="nodes">
                  <div v-for="(node,i) in form.nodes">
                    <div style="padding-bottom: 10px">
                      <el-select v-model="node.agentCode" :disabled="true" filterable @change="selectNode(node)"
                                 placeholder="请选择">
                        <el-option v-for="item in nodeList" :key="item.value" :label="item.label" :value="item.value"
                                   :disabled="item.disabled">
                          <span style="float: left">{{ item.label }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.maxValue }}</span>
                        </el-option>
                      </el-select>
                      <el-input-number v-model="node.agentWeight" :disabled="true" :min="1" :max="100"
                                       @blur="checkInputNumValue(node,0)" style="margin: 0 10px"/>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    每个节点执行任务的占比
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <div v-for="(item,i1) in form.execStrategys">
              <el-row>
                <el-col :span="15">
                  <el-row>
                    <el-form-item :label="'自定义策略-'+ (i1+1)"></el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item label="时间段">
                      <el-time-select placeholder="起始时间" v-model="item.stHour" :disabled="true"
                                      :picker-options="{start: '00:00',step: '01:00',end: '24:00'}"
                                      style="width: 35%"/>
                      <el-time-select placeholder="结束时间" v-model="item.endHour" :disabled="true"
                                      :picker-options="{start: '00:00',step: '01:00:',end: '24:00',minTime: item.stHour}"
                                      style="margin-left: 10px;width: 35%"/>
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item label="资源数">
                      <el-input-number v-model="item.resNum" :disabled="true" :min="0"/>
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item label="并发数">
                      <el-input-number v-model="item.concurrentNum" :disabled="true" :min="0"/>
                    </el-form-item>
                  </el-row>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      给特定时间段设置并发数和资源数的阈值
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row>
              <el-col :span="15">
                <el-form-item label="运维管理员" prop="delivery" style="padding-right: 20%">
                  <el-select v-model="form.devAdmins" filterable multiple placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item in devAdminList" :key="item.username" :label="item.nickName"
                               :value="item.username"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    运维管理员用于协助应用管理员运维
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="监控管理员" prop="delivery" style="padding-right: 20%">
                  <el-select v-model="form.monitorAdmins" filterable multiple placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item in monitorAdminList" :key="item.username" :label="item.nickName"
                               :value="item.username"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    监控管理员用于协助应用管理员监控
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="15">
                <el-form-item label="发布管理员" prop="delivery" style="padding-right: 20%">
                  <el-select v-model="form.releaseAdmins" filterable multiple placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item in releaseAdminList" :key="item.username" :label="item.nickName"
                               :value="item.username"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    发布管理员用于协助应用管理员发布
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <div class="form-operator-button" v-if="checkPermission(['app'])">
              <el-button type="primary" @click.native="toSubmit" style="margin-right: 100px">保存</el-button>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import crudApp from '@/api/app/app'
import checkPermission from '@/utils/permission' // 权限判断函数

export default {
  name: 'appConf',
  data() {
    return {
      form: {
        pkId: null,
        appCode: null,
        appName: null,
        concurrentNum: 100,
        resNum: 100,
        planExecDuration: "10",
        appAdmin: null,
        appDesc: null,
        mutexPool: null,
        dispatcherStrategyCode: null,
        isAssignRes: null,
        overPlanDuration: '30',
        errDifferDuration: '10',
        nodes: [{nodeCode: null, agentWeight: null}],
        execStrategys: [],
        releaseAdmins: [],
        monitorAdmins: [],
        devAdmins: [],
      },
      groupList: [],
      nodeList: [],
      devAdminList: [],
      monitorAdminList: [],
      releaseAdminList: [],
      rules: {}
    }
  },
  created() {
    this.findAppConfDtoByAppCode();
    this.toInitUserByRole();
  },
  methods: {
    checkPermission,
    toSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          crudApp.updateAppConf(this.form).then(res => {
            if (res) {
              this.$notify({title: '成功', message: '修改成功', type: 'success'});
            } else {
              this.$notify({title: '修改失败', message: '修改失败', type: 'warning'});
            }
          })
        }
      })
    },
    toInitUserByRole() {
      this.findUserByRole('109');
      this.findUserByRole('110')
      this.findUserByRole('111');
    },
    //查询管理员
    findUserByRole(roleId) {
      crudApp.findUserByRole(roleId)
        .then(response => {
          if ('109' == roleId) {
            this.devAdminList = response
          }
          if ('110' == roleId) {
            this.monitorAdminList = response
          }
          if ('111' == roleId) {
            this.releaseAdminList = response
          }
        })
        .catch(error => {
          this.$notify({title: '信息获取失败', message: error, type: 'warning'});
        })
    },
    //点击显示提示信息
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
    //获取修改应用信息
    findAppConfDtoByAppCode() {
      crudApp.findAppConfDtoByAppCode()
        .then(response => {
          this.form = response
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
